import { useState } from 'react';
import './Register.css'
import { Input, Button, message } from 'antd';
import { userRegister } from '../../api/user.js';
import { MIN_LOADING_TIME } from '../../constant/index.js';
/**
 * 登录页面组件
 * @returns React.FC<{}>
 */

export default function Register() {

    const [messageApi, contextHolder] = message.useMessage();

    const [loading, setLoading] = useState(false)

    //用户注册表单数据
    const [form, setForm] = useState({
        userAccount: '',
        userPassword: '',
        checkPassword: ''
    })

    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setForm(prev => ({
            ...prev,
            [name]: value
        }))
    }

    //注册函数
    const handleClick = async () => {

        try {
            setLoading(true)

            const [res] = await Promise.all([
                userRegister(form),
                new Promise(resolve => {
                    setTimeout(resolve, MIN_LOADING_TIME)
                })
            ])

            if (res?.data?.code === 0) {
                setLoading(false)
                messageApi.open({
                    type: 'success',
                    content: '注册成功，请登录',
                })
                setTimeout(() => {
                    window.location.href = '/user/login'
                }, 1500)
            } else {
                setLoading(false)
                messageApi.open({
                    type: 'error',
                    content: res?.data?.message || '注册失败',
                })
            }

        } catch (e) {
            messageApi.open({
                type: 'error',
                content: e.response.data.message,
            })

        } finally {
            setLoading(false)
        }

    }
    return (
        <div id="register">
            {contextHolder}
            <form className='form'>
                <h3>用户注册</h3>
                <div className='form-item'>
                    <label className='form-label'>用户名:</label>
                    <Input placeholder='用户名'
                        value={form.userAccount}
                        onChange={handleInputChange}
                        id='userAccount'
                        name='userAccount'
                        type='text' />
                </div>
                <div className='form-item'>
                    <label className='form-label'>密码:</label>
                    <Input placeholder='密码' name='userPassword' type='password' onChange={handleInputChange} />
                </div>

                <div className='form-item'>
                    <label className='form-label'>确认密码:</label>
                    <Input placeholder='确认密码' name='checkPassword' type='password' onChange={handleInputChange} />
                </div>

                <div className="form-item links">
                    <a href="/user/login" className='link'>已有账号?去登录</a>
                    <a href="/user/forget" className='link'>忘记密码</a>
                </div>


                <Button type='primary' className='form-item' loading={loading} onClick={handleClick}>注册</Button>
            </form>
        </div>
    )
}